<template>
    <div class="header">
    <div class="header-left">
        <div class="iconfont icon">&#xe61e</div>
    </div> 
    
    <div class="header-right">
        <div class="header-rleft">
            <div>境内</div>
        </div>
        <div class="header-rright">
           <div>境外</div>
        </div>
    </div>
    </div>
 </template>
 
 <script>
 export default {
     name: 'CityHeader'
 }
 </script>
 
<style lang="stylus" scoped>
   @import '~styles/varibles.styl'
  .header
    overflow: hidden
    background: $bgcolor
    display: flex
    height: .86rem
    .header-left
      font-size: .32rem
      color: #fff
      width: .64rem
      display: flex
      float: left
      justify-content: center
      align-items: center
      .icon
        width: .4rem
        text-align: center
    .header-right
      justify-content: center
      align-items: center
      display: flex
      height: .86rem
      flex: 1 1 auto
      .header-rleft
        display: flex
        align-items: center
        justify-content: center
        height: .52rem
        background: #fff
        color: $bgcolor
        width: 2.1rem
        border: .01rem solid #fff
        border-radius: .06rem
      .header-rright
        display: flex
        justify-content: center
        align-items: center
        height: .52rem
        background-color: $bgcolor
        width: 2.1rem
        border: .01rem solid #fff
        border-radius: .06rem
 </style> 